<template>
  <div>
    <div class="luck-draw-box" v-show="isShow">
      <!-- 预告区 -->
      <div class="advance-box" v-if="data.activity_status == 0">
        <div class="advance-count-down">
          <span>倒计时</span>
          <count-down
            :actEndTime="data.start_time"
            background="#865642"
            color="#fff"
            :type="3"
            :round="false"
          ></count-down>
        </div>
      </div>
      <!-- 奖品区 -->
      <div class="prize-box" :class="data.activity_status == 1 ? 'magrin' : ''">
        <!-- 一等奖 -->
        <div class="prize-first">
          <div class="prize-title">
            <i class="left"></i>
            <span>一等奖</span>
            <i class="right"></i>
          </div>
          <!-- 商品 -->
          <div
            class="prize-good-img"
            @click="JumpName('item-detail', { detailId: first_prize.prize_id })"
            v-if="first_prize.type == 1"
          >
            <img :src="first_prize.prize_pic.img_path" alt="" />
          </div>
          <!-- 优惠券 -->
          <div class="prize-coupon" v-else-if="first_prize.type == 2">
            <div
              class="coupon-left"
              v-if="first_prize.promotion_type == 0"
              v-html="scaleGoodsPriceFn(first_prize.name_value)"
            ></div>
            <div class="coupon-left" v-else>{{ first_prize.name_value }}</div>
            <div class="coupon-right">
              <p>{{ first_prize.name }}</p>
              <p>{{ first_prize.use_time }}</p>
            </div>
          </div>
          <div class="prize-info">
            {{ first_prize.name }} <span>x{{ first_prize.num }}</span>
          </div>
        </div>
        <!-- 二等奖 -->
        <div class="prize-second" v-if="second_prize.type_id !== '0'">
          <div class="prize-title">
            <i class="left"></i>
            <span>二等奖</span>
            <i class="right"></i>
          </div>
          <!-- 商品 -->
          <div class="prize-good-img" v-if="second_prize.type == 1">
            <img :src="second_prize.prize_pic.img_path" alt="" />
          </div>
          <!-- 优惠券 -->
          <div class="prize-coupon" v-else-if="second_prize.type == 2">
            <div
              class="coupon-left"
              v-if="second_prize.promotion_type == 0"
              v-html="scaleGoodsPriceFn(second_prize.name_value)"
            ></div>
            <div class="coupon-left" v-else>{{ second_prize.name_value }}</div>
            <div class="coupon-right">
              <p>{{ second_prize.name }}</p>
              <p>{{ second_prize.use_time }}</p>
            </div>
          </div>
          <div class="prize-info">
            {{ second_prize.name }} <span>x{{ second_prize.num }}</span>
          </div>
        </div>
      </div>
      <!-- 开奖倒计时 -->
      <div class="reward-count-down" v-if="data.activity_status == 1">
        <span>距离开奖</span>
        <count-down
          :actEndTime="data.end_time"
          @finish="luckDrawPrizeData"
          background="#333333"
          color="#fff"
          :type="3"
          :round="false"
        ></count-down>
        <div class="reward-count-switch" style="display: none">
          <span>开奖提醒</span>
          <van-switch
            @input="openDrawWarn"
            :inactive-value="0"
            :active-value="1"
            v-model="checked"
            active-color="#CA4145"
            inactive-color="#dcdee0"
            size="12px"
            style="vertical-align: text-bottom"
          />
        </div>
      </div>
      <!-- 我的抽奖码 -->
      <div
        class="my-draw-code"
        v-if="data.is_get_draw_code == 1"
        @click="openMyCode"
      >
        <span>我的抽奖码：{{ data.my_draw_code }}</span>
        <i class="icon-right"></i>
      </div>
      <!-- 按钮部分  -->
      <div class="btn-box">
        <div v-if="data.activity_status == 1">
          <van-button
            v-if="data.is_get_draw_code == 0"
            class="btn"
            color="#CA4145"
            round
            type="info"
            @click="getDrawCode"
            >领取抽奖码</van-button
          >
          <van-button
            v-else
            class="btn"
            color="#CA4145"
            round
            type="info"
            @click="inviteFriend"
            >邀请好友，获得更多的邀请码</van-button
          >
        </div>
      </div>
      <!-- 抽奖说明 -->
      <div class="draw-desc" v-if="data.description">
        <div class="draw-desc-title">
          <i class="left"></i>
          <span>活动说明</span>
          <i class="right"></i>
        </div>
        <div class="draw-desc-box">
          {{ data.description }}
        </div>
      </div>
      <!-- 抽奖码弹层 -->
      <code-popup ref="codePopup" :serialNumber="serialNumber"></code-popup>
      <!-- 我的抽奖码 -->
      <my-code-popup ref="myCodePopup"></my-code-popup>
      <!-- 送你一张优惠券 -->
      <send-popup
        v-if="from_uid && data.is_get_draw_code == 0"
        red="sendPopup"
      ></send-popup>
      <!-- 关注才能开启提醒 -->
      <shop-code ref="shopCode"></shop-code>
      <!-- 分享弹层 -->
      <luck-draw-share
        ref="luckDrawShare"
        @share="() => (this.$refs.shareShades.showShade = true)"
        @shareCode="shareCode"
      ></luck-draw-share>
      <!-- 分享指引 -->
      <share-shade ref="shareShades"></share-shade>
      <!-- 海报分享 -->
      <poster-popup ref="posterPopup" :qrcode="qrcode"></poster-popup>

    </div>
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
  
</template>

<script>
import { getPoster } from '@/api/item/activity'
import {
  luckDrawPrizeData,
  getDrawCode,
  putActivityInfo,
} from '@/api/activity/activityApi'
import { scaleGoodsPrice } from '@/utils/index'
import countDown from '@/components/countDown'
import myCodePopup from './myCodePopup'
import codePopup from './codePopup'
import sendPopup from './sendPopup'
import luckDrawShare from './luckDrawShare'
import posterPopup from './posterPopup'
import shopCode from '@/components/ShopCode'
import shareShade from '@/components/wxShare/shareShade'
import { mapGetters } from 'vuex'
import { mpShare } from '@/utils/utils'
import small from '@/smallapp/small'
import SmallLogin from '@/components/SmallLogin/smallLogin'

import Vue from 'vue'
import { Switch } from 'vant'

Vue.use(Switch)
export default Vue.extend({
  name: 'index',
  components: {
    countDown,
    myCodePopup,
    codePopup,
    shopCode,
    sendPopup,
    luckDrawShare,
    shareShade,
    SmallLogin,
    posterPopup,
  },
  data() {
    return {
      isShow: false,
      data: {},
      first_prize: {},
      second_prize: {},
      draw_code_id: '', // 抽奖码id（用于自己获得码领取）
      need_subscribe: 0, // 是否关注
      checked: 0,
      from_uid: '', // 别人分享的链接带的id
      activity_id: '',
      poster_url: '',
      qrcode: '',
      serialNumber: '',
    }
  },
  computed: {
    ...mapGetters(['wxConfig']),
  },
  methods: {
    JumpName(name, data) {
      this.$JumpName(this, name, data)
    },
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    luckDrawPrizeData() {
      const params = {
        activity_id: this.activity_id,
      }
      this.$loadingWrap.show()
      luckDrawPrizeData(params).then((res) => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.isShow = true
          this.data = res.data
          this.first_prize = res.data.first_prize
          this.second_prize = res.data.second_prize
          this.draw_code_id = res.data.draw_code_id
          this.need_subscribe = res.data.need_subscribe
          this.poster_url = res.data.poster_url
          this.checked = res.data.is_open_remind
          // TODO 小程序分享
          const option = {
            title: res.data.share.title, // 分享标题
            imgUrl: res.data.share.imgUrl, // 分享图标
            shareParam: res.data.share.link.split('?')[1],
          }
          // console.log(option, 'option')
          mpShare(true, false, '/goodsOrder/pages/luckDraw/index', option)
        } else {
          if (res.data.skip_url == 'activity_end') {
            wx.redirectTo({
              url: `/goodsOrder/pages/luckDrawEnd/index?type=jump&targeturl=${encodeURIComponent(
                '/luckDrawEnd'
              )}&status=1`,
            })
          } else if (res.data.skip_url == 'activity_lose') {
            wx.redirectTo({
              url: `/goodsOrder/pages/luckDrawEnd/index?type=jump&targeturl=${encodeURIComponent(
                '/luckDrawEnd'
              )}&status=-1`,
            })
          } else if (res.data.skip_url == 'win_prize') {
            this.$JumpName(this, 'luckDrawPrize', {
              activity_id: this.activity_id,
            })
          }
        }
      })
    },
    // 分享海报
    shareCode() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      const data = {
        source_url: this.poster_url,
        x: 0,
        y: 0,
        width: 300,
      }
      if (this.second_prize.type_id == '0') {
        data.height = 342
      } else {
        data.height = 470
      }
      getPoster(data).then((res) => {
        this.$refs.posterPopup.showPopup = true
        this.$loadingWrap.close()
        this.qrcode = res.data
      })
    },
    // 打开我的抽奖码弹层
    openMyCode() {
      this.$refs.myCodePopup.showMyCodePop = true
      this.$refs.myCodePopup.init
    },
    // 领取抽奖码
    getDrawCode() {
      const params = {
        from_uid: this.from_uid,
        activity_id: this.activity_id,
        draw_code_id: this.draw_code_id,
      }
      this.$loadingWrap.show()
      getDrawCode(params).then((res) => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.serialNumber = res.data.serial_number
          this.$refs.codePopup.showCodePop = true
        }
      })
    },
    // 邀请
    inviteFriend() {
      this.$refs.luckDrawShare.showShare = true
    },
    // 开奖提醒
    openDrawWarn(checked) {
      if (this.need_subscribe == 0) {
        this.$refs.shopCode.dialogVisible = true
        this.checked = !this.checked
      } else {
        const params = {
          activity_id: this.activity_id,
          status: checked,
        }
        this.$loadingWrap.show()
        putActivityInfo(params).then((res) => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.checked = checked
          } else {
            this.$Error(res.msg)
          }
        })
      }
    },
  },
  mounted() {
    this.activity_id = this.$route.query.activity_id
    window.addEventListener('wxload', (options) => {
      // console.log(options, '分享参数')
      this.activity_id = options.activity_id ? options.activity_id : this.activity_id
      if (options.from_uid) {
        this.from_uid = options.from_uid
      }
      small.HandleShareParams()
      this.luckDrawPrizeData()
    })

    window.addEventListener('wxshow', () => {
      if (!small.checkLogin()) {
        this.$refs.smalllogin.openSmallLoginPop()
      }
    })

    window.$$subscribe('loginReload', (reload) => {
      if (reload) {
        this.luckDrawPrizeData()
      }
    })
  }
})
</script>

<style lang="scss">
@import '../../../styles/mixin';

.luck-draw-box {
  padding-bottom: 30px;
  background: #fec7c2;
  overflow: hidden;
  .advance-box {
    overflow: hidden;
    height: 335px;
    background: url('https://img.wifenxiao.com/h5-wfx/images/activity/advance_bg.png')
      center/cover no-repeat;
    .advance-count-down {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 195px;
      > span {
        font-size: 28px;
      }
    }
  }
  .prize-box {
    background: #feecea;
    border-radius: 12px;
    padding: 0 24px 24px;
    margin: 0 32px;
    &.magrin {
      margin-top: 22px;
    }
    .prize-title {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 26px 0;
      i {
        display: block;
        width: 92px;
        height: 20px;
        background: url('https://img.wifenxiao.com/h5-wfx/images/activity/prize_title.png')
          center/cover no-repeat;
        &.right {
          transform: rotate(180deg);
        }
      }
      span {
        font-size: 36px;
        font-weight: 500;
        color: #ca4145;
        margin: 0 24px;
      }
    }
    .prize-good-img {
      img {
        width: 100%;
      }
    }
    .prize-coupon {
      display: flex;
      height: 132px;
      background: url('https://img.wifenxiao.com/h5-wfx/images/activity/prize_coupon.png')
        center/cover no-repeat;
      .coupon-left {
        width: 206px;
        text-align: center;
        line-height: 130px;
        white-space: nowrap;
        color: #9d521b;
        font-size: 28px;
        font-weight: bold;
        @include showEllipsis;
        span {
          &.unit {
            color: #9d521b;
            font-size: 32px;
          }
          &.num-font {
            color: #b26616;
            font-size: 48px;
          }
          &.num-back {
            color: #b26616;
            font-size: 30px;
          }
        }
      }
      .coupon-right {
        padding-left: 50px;
        width: calc(100% - 206px);
        padding-top: 26px;
        p {
          &:first-child {
            font-size: 28px;
            font-weight: 500;
            color: #a24f23;
            line-height: 40px;
            @include showEllipsis;
            margin-bottom: 6px;
          }
          &:last-child {
            font-size: 24px;
            color: #ac5925;
            line-height: 34px;
            @include showEllipsis;
          }
        }
      }
    }
    .prize-info {
      @include showEllipsis;
      font-size: 28px;
      line-height: 76px;
      padding-right: 100px;
      position: relative;
      span {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24px;
        color: #666666;
      }
    }
  }
  .reward-count-down,
  .my-draw-code {
    background: #feecea;
    border-radius: 12px;
    margin: 32px 32px 0;
    padding: 26px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 38px;
    > span {
      font-size: 28px;
      font-weight: 500;
      color: #ca4145;
    }
    .count-down {
      flex: 1;
      margin-left: 12px;
    }
    .reward-count-switch {
      font-size: 24px;
      font-weight: 400;
      color: #ca4145;
      .van-switch__node {
        box-shadow: 0 0 0 0 #fff;
      }
    }
  }
  .my-draw-code {
    position: relative;
    .icon-right {
      border: 0;
      width: 32px;
      height: 32px;
      position: absolute;
      right: 24px;
      top: 50%;
      transform: translateY(-50%);
      background: url('https://img.wifenxiao.com/h5-wfx/images/activity/luck_right.png')
        center/cover no-repeat;
    }
  }
  .btn-box {
    padding: 48px 32px;
    .btn {
      font-size: 32px;
      height: 80px;
      width: 100%;
    }
  }
  .draw-desc {
    margin: 0 32px;
    .draw-desc-title {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 26px;
      i {
        display: block;
        width: 92px;
        height: 20px;
        background: url('https://img.wifenxiao.com/h5-wfx/images/activity/prize_title.png')
          center/cover no-repeat;
        &.right {
          transform: rotate(180deg);
        }
      }
      span {
        font-size: 36px;
        font-weight: 500;
        color: #ea646d;
        margin: 0 24px;
      }
    }
    .draw-desc-box {
      padding: 25px 30px;
      border-color: #f5b5b6;
      border-width: 4px 8px 10px;
      border-style: solid;
      background: #fff;
      font-size: 28px;
      font-weight: 500;
      color: #ea646d;
      line-height: 40px;
    }
  }
}
</style>